

<template>
  <div class="register">
    <div class="btn2">
      <el-button type="primmary"  @click="importUserHandle">导入</el-button>
      <el-button type="primmary" @click="exportUserHandler">导出</el-button>

    </div>
    <div class="form_data">
      <searchData :loadData="setPage" :currentPage="currentPage" :pageSize="pageSize1" />
    </div>
    <div>
      <formdata :tabledata="data" :total="total" :loadData="setPage" :currentPage="currentPage" :pageSize="pageSize1" />
    </div>
    <!-- 弹出层，上传excel -->
    <el-dialog title="上传excel" v-model="dialogVisible" width="30%">
      <!-- 在h5中，任意元素添加上draggable属性，它都能被拖动 -->
      <!-- <div draggable>aaaa</div> -->
      <div class="upload-excel-box" v-dragexcelupload="batchAddUser">将文件拖到此处</div>
    </el-dialog>
  </div>
</template>
  
<script setup lang="ts">
import { reactive, ref } from 'vue'
import formdata from './ui/formData.vue';
import searchData from './ui/searchData.vue'
import useRegisterUserList from '@/hooks/useRegisterUser'
import { utils, writeFile, read } from 'xlsx'
import { checkUserLogin } from '@/router/hooks';
// import type {formType} from './ui/searchData.vue'
import {batchAddUserApi }from '@/api/userApi' 

const [currentPage, data, total, pageSize1, loadData] = useRegisterUserList()
const setPage = (page: number = 1, size: number = 10,form?:any) => {
  loadData(page, size,form)
}
const dialogVisible=ref(false);
const importUserHandle = () => {
  dialogVisible.value=true;  
}
/////////////////////////////获取不到json？？
const batchAddUser = async (json:any) => {
  let ret = await batchAddUserApi(json)
      if (ret.code === 0) {
      dialogVisible.value = false
        // 重新请求一个用户列表
        setPage(1)
      }
}
const exportUserHandler = () => {
  const workerBook = utils.book_new()
  const worksheet = utils.json_to_sheet(data.value)
  utils.book_append_sheet(workerBook, worksheet, '列表')
  writeFile(workerBook, '列表.xlsx')
}
</script>
  
<style scoped>
/* 样式代码 */
.form_data {
  width: 100%;
  height: 60px;
}

.register {
  margin: 18px 18px;
  /* background-color: black; */
  height: 480px;
  position: relative;

  .btn2 {
    float: right;
    margin-right: 15px;
    padding-top: 20px;
    position: absolute;
    top: -80px;
    right: 15px;
  }
}
.upload-excel-box {
  height: 300px;
  width: 300px;
  border: 3px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin: 0 auto;
}
</style>